home *** CD-ROM | disk | FTP | other *** search
/ Internet News 1999 February / InternetNews_1999_02.iso / pc / Articoli / dynamicHtml / Esempi9807 / Esempio 1 / menu.js < prev    next >
Text File  |  1998-01-25  |  11KB  |  467 lines
  1.  
  2.  
  3. if (perCentOver != null) {
  4.     childOverlap = (perCentOver/100) * menuWidth
  5. }
  6. mSecsVis = secondsVisible*1000;
  7.  
  8. semi = ";";
  9. styleStr = "<STYLE TYPE='text/css'>"
  10. styleStr += ".items {"
  11. styleStr += "width:" + menuWidth + semi
  12. styleStr += "color:"+ fntCol + semi
  13. styleStr += "font-size:"+ fntSiz + semi
  14. styleStr += "font-weight:"+ fntWgh + semi
  15. styleStr += "font-style:"+ fntSty + semi
  16. styleStr += "font-family:"+ fntFam + semi
  17. styleStr += "border-width:" + borWid + semi
  18. styleStr += "border-color:" + borCol + semi
  19. styleStr += "border-style:" + borSty + semi
  20. styleStr += "line-height:" + linHgt + semi
  21. styleStr += "}"
  22. styleStr += "</STYLE>";
  23.  
  24. document.write(styleStr);
  25.  
  26. imgStr = "<IMG SRC=" + imgSrc + " WIDTH=" + imgSiz + " HEIGHT=" + imgSiz +" BORDER=0 VSPACE=2 ALIGN=RIGHT>"
  27.  
  28. topCount = 1;
  29. areCreated = false;
  30. isOverMenu = false;
  31. currentMenu = null;
  32. allTimer = null;
  33.  
  34. function menuSetup(hasParent,lastItem,openCont,openItem) {
  35.  
  36.     this.menuOver = menuOver;
  37.     this.menuOut = menuOut;
  38.  
  39.     this.onmouseover = this.menuOver;
  40.     this.onmouseout = this.menuOut;
  41.  
  42.     this.showIt = showIt;
  43.     this.keepInWindow = keepInWindow;
  44.  
  45.     this.hideTree = hideTree
  46.     this.hideParents = hideParents;
  47.     this.hideChildren = hideChildren;
  48.     this.hideTop = hideTop;
  49.     
  50.     this.hasChildVisible = false;
  51.     this.isOn = false;
  52.     
  53.     this.hideTimer = null;
  54.  
  55.     if (hasParent) {
  56.         this.hasParent = true;
  57.         this.parentMenu = openCont;
  58.         this.parentItem = openItem;
  59.         this.parentItem.child = this;
  60.     }
  61.     else {
  62.         this.hasParent = false;
  63.         this.hideSelf = hideSelf;
  64.     }
  65.  
  66.     if (NS4) {
  67.         this.fullHeight = lastItem.top + lastItem.document.height;
  68.         this.clip.bottom = this.fullHeight;
  69.     }
  70.     else {
  71.         this.fullHeight = lastItem.style.pixelTop + lastItem.offsetHeight;
  72.         this.showIt(false);
  73.         this.onselectstart = cancelSelect;
  74.         this.moveTo = moveTo;
  75.         this.moveTo(0,0);
  76.     }
  77. }
  78.  
  79. function itemSetup(arrayPointer,whichArray) {
  80.  
  81.     this.itemOver = itemOver;
  82.     this.itemOut = itemOut;
  83.     this.onmouseover = this.itemOver;
  84.     this.onmouseout = this.itemOut;
  85.  
  86.     this.dispText = whichArray[arrayPointer];
  87.     this.linkText = whichArray[arrayPointer + 1];
  88.     this.hasMore = whichArray[arrayPointer + 2];
  89.  
  90.     if (this.linkText.length > 0) {
  91.         this.linkIt = linkIt;
  92.         if (NS4) {
  93.             this.onfocus = this.linkIt;
  94.         }
  95.         else {
  96.             this.onclick = this.linkIt;
  97.             this.style.cursor = "hand";
  98.         }
  99.     }
  100.       
  101.     if (this.hasMore) {
  102.         htmStr = imgStr + this.dispText;
  103.     }
  104.     else {
  105.         htmStr = this.dispText;
  106.     }
  107.  
  108.     if (NS4) {
  109.         layStr = "<SPAN CLASS=items>" + htmStr+ "</SPAN>";
  110.         this.document.write(layStr);
  111.         this.document.close();
  112.  
  113.         this.bgColor = backCol;
  114.         this.clip.right = menuWidth;
  115.         this.visibility = "inherit";
  116.         this.container = this.parentLayer;
  117.  
  118.         if (arrayPointer == 0) {
  119.             this.top = 0;
  120.         }
  121.         else {
  122.             this.top = this.prevItem.top + this.prevItem.document.height - borWid;
  123.         }
  124.         this.left = 0;
  125.     }
  126.     else {
  127.         this.className = "items";
  128.         this.style.padding = 3;
  129.         this.innerHTML = htmStr;
  130.  
  131.         this.style.backgroundColor = backCol; 
  132.         this.container = this.offsetParent;
  133.  
  134.         if (arrayPointer == 0) {
  135.             this.style.pixelTop = 0;
  136.         }
  137.         else {
  138.             this.style.pixelTop = this.prevItem.style.pixelTop + this.prevItem.offsetHeight - borWid;
  139.         }
  140.         this.style.pixelLeft = 0;
  141.     }
  142. }
  143.  
  144. function makeElement(whichEl,whichContainer) {
  145.     if (arguments.length==1)
  146.         whichContainer = (NS4) ? window : document.body;
  147.  
  148.     if (NS4) {
  149.         eval(whichEl + "= new Layer(menuWidth,whichContainer)");
  150.     }
  151.     else {
  152.         elStr = "<DIV ID=" + whichEl + " STYLE='position:absolute'></DIV>";
  153.         whichContainer.insertAdjacentHTML("BeforeEnd",elStr);
  154.     }
  155.  
  156.     return eval(whichEl);
  157. }
  158.  
  159. function makeTop() {
  160.     while(eval("window.arMenu" + topCount)) {
  161.         topArray = eval("arMenu" + topCount);
  162.         topName = "elMenu" + topCount;
  163.  
  164.         topMenu = makeElement(topName);
  165.         topMenu.setup = menuSetup;
  166.  
  167.         topItemCount = 0;
  168.         for (i=0; i<topArray.length; i+=3) {
  169.             topItemCount++;
  170.             status = "Creazione menu in corso, attendere per favore: " + topCount + " / " + topItemCount;
  171.             topItemName = "item" + topCount + "_" + topItemCount;
  172.             topItem = makeElement(topItemName,topMenu);
  173.  
  174.             if (topItemCount >1)
  175.                 topItem.prevItem = eval("item" + topCount + "_" + (topItemCount-1));
  176.  
  177.             topItem.setup = itemSetup;
  178.             topItem.setup(i,topArray);
  179.  
  180.             if (topItem.hasMore) makeSecond();
  181.         }
  182.         
  183.         topMenu.setup(false,topItem);
  184.         topCount++
  185.     }
  186.  
  187.     status = (topCount-1) + " Creazione del menu completata"
  188.     areCreated = true;
  189. }
  190.  
  191. function makeSecond() {
  192.  
  193.     secondCount = topCount + "_" + topItemCount;
  194.     
  195.     secondArray = eval("arMenu" + secondCount);
  196.     secondName = "elChild" + secondCount;
  197.     
  198.     secondMenu = makeElement(secondName);
  199.     secondMenu.setup = menuSetup;
  200.  
  201.     secondItemCount=0;
  202.     for (j=0; j<secondArray.length; j+=3) {
  203.         secondItemCount++;
  204.         secondItemName = "item" + secondCount +"_" + secondItemCount;
  205.  
  206.         secondItem = makeElement(secondItemName,secondMenu)        
  207.         
  208.         if (secondItemCount >1)
  209.             secondItem.prevItem = eval("item" + secondCount  + "_" + (secondItemCount-1));
  210.  
  211.         secondItem.setup = itemSetup;
  212.         secondItem.setup(j,secondArray);
  213.  
  214.         if (secondItem.hasMore) makeThird();
  215.     }
  216.  
  217.     secondMenu.setup(true,secondItem,topMenu,topItem);
  218. }
  219.  
  220. function makeThird() {
  221.     thirdCounter = secondCount + "_" + secondItemCount 
  222.     
  223.     thirdArray = eval("arMenu" + thirdCounter);
  224.     thirdName = "elGrandChild" + thirdCounter;
  225.     thirdMenu = makeElement(thirdName)
  226.     
  227.     thirdMenu.setup = menuSetup;
  228.  
  229.     thirdItemCount=0;
  230.     for (k=0; k<thirdArray.length; k+=3) {
  231.         thirdItemCount++;
  232.         thirdItemName = "item" + thirdCounter + "_" + thirdItemCount;
  233.         thirdItem = makeElement(thirdItemName,thirdMenu);
  234.  
  235.         if (thirdItemCount >1)
  236.             thirdItem.prevItem = eval("item" + thirdCounter + "_" +(thirdItemCount-1));
  237.  
  238.         thirdItem.setup = itemSetup;
  239.         thirdItem.setup(k,thirdArray);
  240.  
  241.     }
  242.  
  243.     thirdMenu.setup(true,thirdItem,secondMenu,secondItem);
  244. }
  245.  
  246. function linkIt() {
  247.     location.href = this.linkText;
  248. }
  249.  
  250. function showIt(on) {
  251.     if (NS4) {this.visibility = (on) ? "show" : "hide"}
  252.         else {this.style.visibility = (on) ? "visible" : "hidden"}
  253. }
  254.  
  255. function keepInWindow() {
  256.     scrBars = 20;
  257.  
  258.     if (NS4) {
  259.         winRight = (window.pageXOffset + window.innerWidth) - scrBars;
  260.         rightPos = this.left + menuWidth;
  261.    
  262.         if (rightPos > winRight) {
  263.             if (this.hasParent) {
  264.                 parentLeft = this.parentMenu.left;
  265.                 newLeft = ((parentLeft-menuWidth) + childOverlap);
  266.                 this.left = newLeft;
  267.             }
  268.             else {
  269.                 dif = rightPos - winRight;
  270.                 this.left -= dif;
  271.             }
  272.         }
  273.  
  274.         winBot = (window.pageYOffset + window.innerHeight) - scrBars;
  275.         botPos = this.top + this.fullHeight;
  276.  
  277.         if (botPos > winBot) {
  278.             dif = botPos - winBot;
  279.             this.top -= dif;
  280.         }
  281.     }
  282.     else {
  283.         winRight = (document.body.scrollLeft + document.body.clientWidth) - scrBars;
  284.         rightPos = this.style.pixelLeft + menuWidth;
  285.     
  286.         if (rightPos > winRight) {
  287.             if (this.hasParent) {
  288.                 parentLeft = this.parentMenu.style.pixelLeft;
  289.                 newLeft = ((parentLeft - menuWidth) + childOverlap);
  290.                 this.style.pixelLeft = newLeft;
  291.             }
  292.             else {
  293.                 dif = rightPos - winRight;
  294.                 this.style.pixelLeft -= dif;
  295.             }
  296.         }
  297.  
  298.         winBot = (document.body.scrollTop + document.body.clientHeight) - scrBars;
  299.         botPos = this.style.pixelTop + this.fullHeight;
  300.  
  301.         if (botPos > winBot) {
  302.             dif = botPos - winBot;
  303.             this.style.pixelTop -= dif;
  304.         }
  305.     }
  306. }
  307.  
  308. function popUp(menuName,e){
  309.     if (!areCreated) return;
  310.  
  311.     hideAll();
  312.  
  313.     currentMenu = eval(menuName);
  314.     xPos = (NS4) ? e.pageX : event.x;
  315.     yPos = (NS4) ? e.pageY : event.y;
  316.     currentMenu.moveTo(xPos,yPos);
  317.  
  318.     currentMenu.keepInWindow()
  319.     currentMenu.isOn = true;
  320.     currentMenu.showIt(true);
  321. }
  322.  
  323. function popDown(menuName){ 
  324.     if (!areCreated) return;
  325.     whichEl = eval(menuName);
  326.     whichEl.isOn = false;
  327.     whichEl.hideTop();
  328. }
  329.  
  330. function menuOver() {
  331.     this.isOn = true;
  332.     isOverMenu = true;
  333.     currentMenu = this;
  334.     if (this.hideTimer) clearTimeout(this.hideTimer);
  335. }
  336.  
  337. function menuOut() {
  338.     if (IE4 && event.srcElement.contains(event.toElement)) return;
  339.     this.isOn = false;
  340.     isOverMenu = false;
  341.     if (IE4) allTimer = setTimeout("currentMenu.hideTree()",10); 
  342. }
  343.  
  344. function itemOver(){
  345.     if (IE4 && event.srcElement.tagName == "IMG") return;
  346.  
  347.     if (NS4) {
  348.         this.bgColor = overCol;
  349.     }
  350.     else {
  351.         this.style.backgroundColor = overCol;
  352.         this.style.color = overFnt;
  353.     }
  354.     
  355.     if (this.container.hasChildVisible) {
  356.         this.container.hideChildren(this);
  357.     }            
  358.  
  359.     if(this.hasMore) {
  360.         if (NS4) {
  361.             this.childX = this.container.left + (menuWidth - childOverlap);
  362.             this.childY = this.pageY + childOffset;
  363.         }
  364.         else {
  365.             this.childX = this.container.style.pixelLeft + (menuWidth - childOverlap);
  366.             this.childY = this.style.pixelTop + this.container.style.pixelTop + childOffset;
  367.         }
  368.  
  369.         this.child.moveTo(this.childX,this.childY);
  370.         this.child.keepInWindow();
  371.         this.container.hasChildVisible = true;
  372.         this.container.visibleChild = this.child;
  373.         this.child.showIt(true);
  374.     }
  375. }
  376.  
  377.  
  378. function itemOut() {
  379.     if (IE4 && (event.srcElement.contains(event.toElement)
  380.      || (event.fromElement.tagName=="IMG" && event.toElement.contains(event.fromElement))))
  381.         return;
  382.  
  383.     if (NS4) {
  384.         this.bgColor = backCol;
  385.         if (!isOverMenu) {
  386.             allTimer = setTimeout("currentMenu.hideTree()",10);
  387.         }
  388.     }
  389.     else {
  390.         this.style.backgroundColor = backCol;
  391.         this.style.color = fntCol;
  392.     }
  393. }
  394.  
  395. function hideAll() {
  396.     for(i=1; i<topCount; i++) {
  397.         temp = eval("elMenu" + i);
  398.         temp.isOn = false;
  399.         if (temp.hasChildVisible) temp.hideChildren();
  400.         temp.showIt(false);
  401.     }    
  402. }
  403.  
  404. function hideTree() { 
  405.     allTimer = null;
  406.     if (isOverMenu) return;
  407.     if (this.hasChildVisible) {
  408.         this.hideChildren();
  409.     }
  410.     this.hideParents();
  411. }
  412.  
  413. function hideChildren(item) {
  414.     if (this.visibleChild.hasChildVisible) {
  415.         this.visibleChild.visibleChild.showIt(false);
  416.         this.visibleChild.hasChildVisible = false;
  417.     }
  418.  
  419.     if (!this.isOn || !item.hasMore || this.visibleChild != this.child) {
  420.         this.visibleChild.showIt(false);
  421.         this.hasChildVisible = false;
  422.     }
  423. }
  424.  
  425. function hideParents() {     
  426.  
  427.     if (this.hasParent) {
  428.         this.showIt(false);
  429.         if (this.parentMenu.hasParent) {
  430.             this.parentMenu.isOn = false;        
  431.             this.parentMenu.showIt(false);
  432.             this.parentMenu.parentMenu.isOn = false;
  433.             whichEl = this.parentMenu.parentMenu
  434.         }
  435.         else {
  436.             this.parentMenu.isOn = false;
  437.             whichEl = this.parentMenu;
  438.         }
  439.     }
  440.     else {
  441.         whichEl = this;
  442.     }
  443.  
  444.     whichEl.hideTop();
  445. }
  446.  
  447. function hideTop() {
  448.     whichEl = this;
  449.     this.hideTimer = setTimeout("whichEl.hideSelf()",mSecsVis);
  450. }
  451.  
  452. function hideSelf() {
  453.     this.hideTimer = null;
  454.     if (!this.isOn && !isOverMenu) { 
  455.         this.showIt(false);
  456.     }
  457. }
  458.  
  459. function cancelSelect(){return false}
  460.  
  461. function moveTo(xPos,yPos) {
  462.     this.style.pixelLeft = xPos;
  463.     this.style.pixelTop = yPos;
  464. }
  465.  
  466. window.onload = makeTop;
  467.